<template>
	<div class="c_detail1" v-if="item">
		<!-- 内部左部大图 -->
		<div class="c_pic1">
			<image :src="item.spu.cover" mode="aspectFill"></image>
		</div>
		<div class="c_right1">
			<!-- 右边上部标题 -->
			<div class="rightSon1">
				<p class="title1">{{ item.spu.spuTitle }}</p>
				<span class="type1">盲盒</span>
			</div>
			<!-- 右边下部按钮及图标 -->
			<div class="right_div1">
				<div class="dates">
					{{ item.collection.createTime.slice(0,10) }}
				</div>
				<div class="right_button1 opened" v-if="item.collection.blindBoxStatus == 'opened'">已开启</div>
				<div class="right_button1 opened" @tap="open(item)" v-else-if="item.spu.blindBoxOpen == 0">开启</div>
				<div class="right_button1" @tap="open(item)" v-else-if="item.spu.blindBoxOpen == 1">开启</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			item:{
				type: Object,
				default:{}
			}
		},
		computed:{
			time(val){
				
			}
		},
		methods: {
			async open(item){
				if(this.item.spu.blindBoxOpen == 0){
					uni.showToast({
						icon: 'none',
						title: '未到开启时间！'
					})
					return;
				}
				this.$emit('atOpen',item)
			}
		},
		created() {
			uni.$on('isOpen',(msg)=>{
				if(msg == this.item.collectionId){
					this.item.collection.blindBoxStatus == 'opened';
					this.$forceUpdate();
				}
			})
		}
	}
</script>

<style lang="scss">
	.c_detail1 {
		width: 91.47vw;
		height: 41.6vw;
		background-color: #1b1b1b;
		border-radius: 6.4vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 4.27vw 0 2.13vw;
		margin-top: 2.67vw;
	
		.c_pic1 {
			width: 37.33vw;
			height: 37.33vw;
			// border-radius: 6vw 0 0 6vw;
			border-radius: 6vw;
			background-color: #f8f8f8;
			overflow: hidden;
	
			image {
				width: 37.33vw;
				height: 37.33vw;
			}
		}
	
		.c_right1 {
			width: 44.53vw;
			height: 37.33vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	
			.rightSon1 {
				width: 44.53vw;
	
				.title1 {
					font-size: 4.27vw;
					font-weight: 500;
					color: #FFFFFF;
					margin-bottom: 0.53vw;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
	
				.type1 {
					font-size: 3.2vw;
					font-weight: 300;
					color: #FFCE80;
				}
			}
	
			.right_div1 {
				width: 44.53vw;
				height: 8.53vw;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
	
				.dates {
					font-size: 3.2vw;
					color: #555555;
					font-weight: 300;
					display: flex;
					flex-direction: column-reverse;
				}
	
				.right_button1 {
					width: 17.07vw;
					height: 8.53vw;
					background-color: #A972FF;
					border-radius: 5.33vw;
					font-size: 3.2vw;
					color: #000000;
					font-weight: 500;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.opened{
					background-color: #555555;
					color: #000;
				}
			}
		}
	}
</style>